<template>
    <div class="header clearfix">
        <div class="container clearfix">
            <div class="logo">
                <router-link to="/">
                    <img src="/static/images/logo.png" alt="logo">
                </router-link>
            </div>
            <div class="nav">
                <div class="menu">
                    <ul class="first clearfix" :class="{show: navIsOpen}">
                        <li v-for="(item, i) in menu"
                            :class="{active: activeFlag === i}"
                            @click="activeFirst(i)"
                            @mouseenter="slideToggle(i)"
                            @mouseleave="slideToggle(-1)">
                            <router-link :to="item.link">
                                <span class="bg"></span>
                                <span class="en">{{item.en}}</span>
                                <span class="cn">{{item.cn}}</span>
                            </router-link>
                            <slide-down>
                                <ul class="second" v-if="item.children.length" v-show="navIndex === i">
                                    <li v-for="child in item.children">
                                        <router-link :to="child.link">
                                            <span class="cn">{{child.cn}}</span>
                                        </router-link>
                                    </li>
                                </ul>
                            </slide-down>
                        </li>
                    </ul>
                </div>
                <div class="btn" :class="{'btn-close': navIsOpen}" @click="toggleMenu"></div>
            </div>
        </div>
    </div>
</template>

<script>
    
    import slideDown from '../assets/js/slideDown'
    
    export default {
        name: 'v-header',
        data() {
            return {
                navIsOpen: false,
                navIndex: -1,
                activeFlag: 0
            }
        },
        components: {slideDown},
        created(){
          this.menu = [
              {
                  en: 'HOME',
                  cn: '首页',
                  link: '/home',
                  children: []
              },
              {
                  en: 'ABOUT',
                  cn: '关于我们',
                  link: '/profile',
                  children: [
                      {
                          en: 'profile',
                          cn: '企业简介',
                          link: '/profile'
                      },
                      {
                          en: 'brand',
                          cn: '品牌诠释',
                          link: '/brand'
                      },
                      {
                          en: 'dyeing',
                          cn: '天染工艺',
                          link: '/dyeing'
                      },
                      {
                          en: 'events',
                          cn: '品牌大事记',
                          link: '/events'
                      }
                  ]
              },
              {
                  en: 'VISION',
                  cn: '形象大片',
                  link: '/campaign',
                  children: [
                      {
                          en: 'campaign',
                          cn: '形象大片',
                          link: '/campaign'
                      },
                      {
                          en: 'lookbook',
                          cn: '经典搭配',
                          link: '/lookbook'
                      },
                      {
                          en: 'feature',
                          cn: '拍摄花絮',
                          link: '/feature'
                      }
                  ]
              },
              {
                  en: 'NEWS',
                  cn: '资讯动态',
                  link: '/news',
                  children: [
                      {
                          en: 'news',
                          cn: '品牌新闻',
                          link: '/news'
                      },
                      {
                          en: 'charity',
                          cn: '公益慈善',
                          link: '/charity'
                      },
                      {
                          en: 'show',
                          cn: '秀场直击',
                          link: '/show'
                      },
                      {
                          en: 'storeOpen',
                          cn: '新店开业',
                          link: '/storeOpen'
                      }
                  ]
              },
              {
                  en: 'JOIN',
                  cn: '招商加盟',
                  link: '/join',
                  children: [
                      {
                          en: 'joinRules',
                          cn: '加盟细则',
                          link: '/join'
                      },
                      {
                          en: 'joinApply',
                          cn: '加盟申请',
                          link: '/joinApply'
                      }
                  ]
              },
              {
                  en: 'SHOP',
                  cn: '门店形象',
                  link: '/storeImage',
                  children: [
                      {
                          en: 'storeImage',
                          cn: '店铺形象',
                          link: '/storeImage'
                      },
                      {
                          en: 'storeSearch',
                          cn: '店铺搜索',
                          link: '/storeSearch'
                      }
                  ]
              },
              {
                  en: 'BESPOKE',
                  cn: '高级定制',
                  link: '/customIdea',
                  children: [
                      {
                          en: 'customIdea',
                          cn: '定制理念',
                          link: '/customIdea',
                      },
                      {
                          en: 'customProcess',
                          cn: '定制流程',
                          link: '/customProcess',
                      }
                  ]
              },
              {
                  en: 'CONTACT',
                  cn: '联系我们',
                  link: '/contact',
                  children: [
                      {
                          en: 'contact',
                          cn: '联系方式',
                          link: '/contact',
                      },
                      {
                          en: 'career',
                          cn: '人才招聘',
                          link: '/career',
                      },
                  ]
              }
          ];
        },
        methods: {
            toggleMenu() {
                this.navIsOpen = !this.navIsOpen;
            },
            slideToggle(i){
                this.navIndex = i;
            },
            activeFirst(i){
                this.activeFlag = i;
            }
        }
    }
</script>

<style lang="scss" scoped>
    
    .header {
        position: fixed;
        top: 40px;
        left: 0;
        z-index: 900;
        width: 100%;
    }
    
    .container {
        position: relative;
        margin: 0 50px;
    }
    
    .logo {
        float: left;
        a {
            display: block;
        }
    }
    
    .nav {
        float: right;
    }

    .btn{
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 50px;
        cursor: pointer;
        background: url("../assets/images/menu-btn-normal.png") left top no-repeat;
        transition: all .8s;
        &.btn-close{
            background-image: url("../assets/images/menu-btn-close.png");
        }
    }

    .menu{
        margin-right: 60px;
    }
    
    .first{
        opacity: 0;
        visibility: hidden;
        transform: translateX(30px);
        transition: all .35s;
        &.show{
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }
        > li{
            position: relative;
            float: left;
            @include hoverOrActive{
                > a{
                    color: #fff;
                    .en{
                        opacity: 0;
                    }
                    .cn, .bg{
                        opacity: 1;
                    }
                }
            }
        }
        a{
            position: relative;
            display: block;
            box-sizing: border-box;
            min-width: 96px;
            padding: 0 25px;
            font-size: 15px;
            line-height: 40px;
            text-align: center;
            color: #2b2b2b;
            transition: background .35s;
            overflow: hidden;
        }
        .en{
        
        }
        .cn{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
        }
        .bg{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url("/static/images/menu-l1-active.png") center center no-repeat;
            opacity: 0;
            transition: .5s;
        }
    }
    
    .second{
        position: absolute;
        top: 100%;
        left: 50%;
        margin-top: 8px;
        transform: translateX(-50%);
        li{
            float: none;
            margin-bottom: 5px;
            &:nth-child(1) a{
                background-image: url("/static/images/submenu-bg1.png");
                @include hoverOrActive{
                    background-image: url("/static/images/submenu-bg1-active.png");
                }
            }
            &:nth-child(2) a{
                background-image: url("/static/images/submenu-bg2.png");
                @include hoverOrActive{
                    background-image: url("/static/images/submenu-bg2-active.png");
                }
            }
            &:nth-child(3) a{
                background-image: url("/static/images/submenu-bg3.png");
                @include hoverOrActive{
                    background-image: url("/static/images/submenu-bg3-active.png");
                }
            }
            &:nth-child(4) a{
                background-image: url("/static/images/submenu-bg4.png");
                @include hoverOrActive{
                    background-image: url("/static/images/submenu-bg4-active.png");
                }
            }
        }
        a{
            padding: 0 30px 0 20px;
            line-height: 30px;
            font-size: 12px;
            font-weight: bold;
            color: rgba(#fff, .75);
            white-space: nowrap;
            background: center center no-repeat;
            @include hoverOrActive{
                color: #fff;
            }
        }
        .cn{
            position: relative;
            opacity: 1;
        }
    }
    
</style>
